<template>
  <div class="home">
    <div class="banter-border">
      <!-- 一开始进入的大图 组件1 -->
      <Banner :src="Src1" :href="'/allgoods'"></Banner>
    </div>
    <div class="tuijian">
      <!-- 精品推荐 组件2 -->
      <ListHeader :src="tuijian" title="精品推荐" :did="1"></ListHeader>
      <!-- 精品推荐的列表 组件3 -->
      <GoodLiat :arr="jplist"></GoodLiat>
      <!-- 热门兑换 组件2 -->
      <ListHeader :src="hot" title="热门兑换" :did="2"></ListHeader>
      <!-- 广告 组件1 -->
      <Banner :src="ad"></Banner>
      <!-- 热门兑换的列表 组件3 -->
      <GoodLiat class="hotlist" :arr="hotlist"></GoodLiat>
      <!-- 积分攻略 组件4 -->
      <ListHeader :src="integral" title="积分攻略" :ismore="true"></ListHeader>
    </div>
    <GoogLue></GoogLue>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import Banner from "../components/hone/Banner.vue";
import ListHeader from "../components/hone/ListHeader.vue";
import GoodLiat from "../components/hone/GoodLiat.vue";
import GoogLue from "../components/hone/GoogLue.vue";
import Src1 from "../assets/images/home/banner.png";
import ad from "../assets/images/home/ad.png";
import hot from "../assets/images/home/hot.png";
import tuijian from "../assets/images/home/Recommend.png";
import integral from "../assets/images/home/integral.png";


import { getRecommendApi, getHotListApi } from "../http/api";

export default {
  name: "Home",
  components: {
    HelloWorld,
    ListHeader,
    GoodLiat,
    Banner,
    GoogLue,
  },
  data() {
    return { Src1, ad, hot, tuijian, integral, jplist: [], hotlist: [] };
  },
  created() {
    this.getJPData();
    this.getHotData();
  },
  methods: {
    async getJPData() {
      const { data } = await getRecommendApi();
      this.jplist = data.data.records;
      
    },
    async getHotData() {
      const { data } = await getHotListApi();
      this.hotlist = data.data.records;
      
    },
  },
};
</script>
<style lang="less" scoped>
.home {
  .banter-border {
    padding-bottom: 50px;
  }
  .tuijian {
    background-color: #f5f5f5;
  }
}
</style>
